import React, { useState, useCallback, useMemo } from 'react'

const Child = React.memo((props) => {
  console.log(1111);
  return (
    <>
      <div>{props.name}</div>
      <div>{props.age}</div>
    </>
  );
});

const Demo = () => {
  const [state, setState] = useState({
    name: 'liusen',
    age: 18,
    maxAge: 19,
    message: 'hahaha',
    counter: 0,
  });

  const clickHandle = useCallback(() => {
    setState({
      name: 'liusen',
      age: 18,
      maxAge: 19,
      counter: state.counter + 1,
    });
  }, [state.counter]);

  const computeExpensiveValue = () => {
    console.log(1);
    return state.age + state.maxAge;
  };

  // const clickHandle = () => {
  //   setState({
  //     name: 'liusen',
  //     age: 18,
  //     counter: state.counter + 1,
  //   });
  // }
 
  const v = useMemo(computeExpensiveValue, [state.age, state.maxAge]);

  return (
    <div>
      <div>{v}</div>
      <div>{state.counter}</div>
      <Child name={state.name} age={state.age} clickHandle={clickHandle} />
      <div onClick={clickHandle}>click me</div>
    </div>
  )
}

export default Demo;
